import { ref, reactive, watchEffect, computed, watch, onMounted, getCurrentInstance } from 'vue'

export default function useTest () {
  // 类似 useState
  const state = reactive({
    count: 1
  })
  const count = ref(1)
  const increment = () => {
    state.count++
  }
  const decrement = () => {
    count.value--
  }
  const doubleCount = computed(() => state.count * 2)
  const { ctx } = getCurrentInstance()
  const gotoAbout = () => {
    ctx.$router.push('/about')
  }
  const number = computed(() => ctx.$store.state.number)
  const updateNumber = () => {
    // ctx.$store.commit('SET_NUMBER', count.value * 100)
    ctx.$store.dispatch('setNumber', count.value * 100)
  }
  watch(() => state.count, () => {
    console.log('state.count 变化了')
  })
  watch(() => count.value, () => {
    console.log('count 变化了')
  })
  const aa = computed(() => ctx.$store.getters.aaValue)
  const updateAA = () => {
    ctx.$store.commit('SET_AA', aa.value + 1)
  }
  // 类似 useEffect
  watchEffect(() => {
    console.log('watchEffect')
  })
  onMounted(() => {
    console.log('mounted')
  })
  return {
    state,
    increment,
    doubleCount,
    decrement,
    count,
    gotoAbout,
    number,
    updateNumber,
    aa,
    updateAA
  }
}
